<template>
<onekit-page>
<onekit-view onekit-class="container">
	<div is="onekit-template-head" :DATA="`${JSON.stringify({title:'onCompassChange'})}`"></div>
	<onekit-view onekit-class="page-body">
		<onekit-view onekit-class="page-section page-section_center">
			<onekit-text onekit-class="page-body-text">旋转手机即可获取方位信息</onekit-text>
			<onekit-view onekit-class="direction">
				<onekit-view onekit-class="bg-compass-line"></onekit-view>
				<onekit-image onekit-class="bg-compass" :onekit-style="`transform: rotate(${direction}deg)`" src="compass.png"></onekit-image>
				<onekit-view onekit-class="direction-value">
					<onekit-text>{{direction}}</onekit-text>
					<onekit-text onekit-class="direction-degree">o</onekit-text>
				</onekit-view>
			</onekit-view>
			<onekit-view onekit-class="controls">
				<onekit-button :disabled="enabled" @Tap="startCompass">开始监听</onekit-button>
				<onekit-button :disabled="!enabled" @Tap="stopCompass">停止监听</onekit-button>
			</onekit-view>
		</onekit-view>
	</onekit-view>
	<div is="onekit-template-foot"></div>
</onekit-view>
</onekit-page></template>
<script>
/* eslint-disable */
import Vue from 'vue';
import onekit_template_0 from '../../../common/head.head.vue';Vue.component('onekit-template-head',onekit_template_0);
import onekit_template_1 from '../../../common/foot.foot.vue';Vue.component('onekit-template-foot',onekit_template_1);
const ONEKIT_JSON= {
  "navigationBarTitleText": "监听罗盘数据",
  "usingComponents": {
    
  }
};
const ONEKIT_SJS = {
};
import wx from '../../../../weixin2vue/wx.js';
import Macro from '../../../../weixin2vue/Macro.js';
const {getApp,getCurrentPages} = Macro;
import Page from '../../../../weixin2vue/OnekitPage.js';
import Component from '../../../../weixin2vue/OnekitComponent.js';
export default Page(ONEKIT_JSON,["transform: rotate(","direction","deg)","enabled"],ONEKIT_SJS,{
    "onShareAppMessage"(){
      return {
        "title":'监听罗盘数据',
        "path":'packageAPI/pages/on-compass-change/on-compass-change'
};
    },
    "data":{
        "enabled":true,
        "direction":0
},
    "onReady"(){
      const that = this;
      wx.onCompassChange(function(res){
      that.setData({
        "direction":parseInt(res.direction,10)
});
    });
    },
    "startCompass"(){
      if(this.data.enabled)
      {
        return;
      };
      const that = this;
      wx.startCompass({
        "success"(){
          that.setData({
            "enabled":true
});
        }
});
    },
    "stopCompass"(){
      if(!this.data.enabled)
      {
        return;
      };
      const that = this;
      wx.stopCompass({
        "success"(){
          that.setData({
            "enabled":false
});
        }
});
    }
});

</script>
<style 
 lang="css">
.direction {
  position: relative ;
  margin-top: 35px ;
  display: flex ;
  width: 520px ;
  height: 520px ;
  align-items: center ;
  justify-content: center ;
}
.direction-value {
  position: relative ;
  font-size: 100px ;
  color: #353535 ;
  line-height: 1 ;
  z-index: 1 ;
}
.direction-degree {
  position: absolute ;
  top: 0 ;
  right: -20px ;
  font-size: 30px ;
}
.bg-compass {
  position: absolute ;
  top: 0 ;
  left: 0 ;
  width: 520px ;
  height: 520px ;
  transition: .1s ;
}
.bg-compass-line {
  position: absolute ;
  left: 134px ;
  top: -5px ;
  width: 3px ;
  height: 28px ;
  background-color: #1AAD19 ;
  border-radius: 500px ;
  z-index: 1 ;
}
.controls {
  margin-top: 35px ;
}
.controls .onekit-button {
  margin-left: 10px ;
  float: left ;
}
</style>